<template>
	<view class="container">
		<top-back-navbar position="fixed" title="钱包" background="#735AFC" color="#fff" right_title='...' right_color="#fff"></top-back-navbar>
		<cxsytabbars :current="2"></cxsytabbars>
		<view class="" style="display: flex;justify-content: space-between;">
			<view class="now_price">
					米票实时价{{qianbao_data.za_baht_price}}
			</view>
			<view class="chongzhi" @click="to_nextpage('/pages/member/zfbPay/zfbPay')">
				
			</view>
		</view>
		
		<view class="content_box">
			
			<view class="top_three_box">
				<view class="item_box">
					<view class="title">
						总发行量
					</view>
					<view class="num">
						{{qianbao_data.za_baht_zong}}
					</view>
				</view>
				<view class="item_box">
					<view class="title" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=liutongmx&r=api.index.get_zakzlt_mingxi_list&title=流通量明细&hander=流通量')">
						流通量
					</view>
					<view class="num">
						{{qianbao_data.za_baht_lt}}
					</view>
				</view>
				<view class="item_box">
					<view class="title">
						剩余量
					</view>
					<view class="num">
						{{qianbao_data.za_baht_sy}}
					</view>
				</view>
			</view>
			
			<view class="top_therr_img">
				<view class="item_box" style="background: url('/static/zn/qianbao_lp.png') 0 0 no-repeat;"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=kuangshi&r=api.index.get_za_mingxi_list&title=粮票明细&hander=我的粮票')">
					
					<view class="num" style="color: #00B9FE;">
						{{qianbao_data.kuangshi}}
					</view>
				</view>
				<view class="item_box" style="background: url('/static/zn/qianbao_mp.png') 0 0 no-repeat;"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=kuangzhu&r=api.index.get_za_mingxi_list&title=米票明细&hander=我的米票')">
					
					<view class="num" style="color: #FF549D;">
						{{qianbao_data.kuangzhu}}
					</view>
				</view>
				<view class="item_box" style="background: url('/static/zn/qianbao_gyc.png') 0 0 no-repeat;">
				
					<view class="num"  style="color: #FCC308;">
						{{qianbao_data.shengtaichi}}
					</view>
				</view>
			</view>
			<view class="tixian_box">
				<view class="ye">
					<view class="txt">
						余额
					</view>
					<view class="num" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=credit2&r=api.index.get_za_mingxi_list&title=余额明细&hander=我的余额')">
						<p style="margin-top: 12px;">￥</p>
						<p style="font-size: 21px;">{{qianbao_data.credit2}}</p>
					</view>
					<view class="button" @click="tixian_touchend('none','我的余额')">
						
					</view>
				</view>
				<view class="sy">
					<view class="txt">
						收益
					</view>
					<view class="num" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_shouyi&r=api.index.get_za_mingxi_list&title=收益明细&hander=我的收益')">
						<p style="margin-top: 12px;">￥</p>
						<p style="font-size: 21px;">{{qianbao_data.za_shouyi}}</p>
					</view>
					<view class="button" @click="tixian_touchend('za','我的收益')">
						
					</view>
				</view>
			</view>
			<view class="from_box">
				
				<!-- <view class="item">
					<view class="txt" 		@click="to_nextpage('/pagesZA/qianbao/mingxi?type=credit2&r=api.index.get_za_mingxi_list&title=余额明细&hander=我的余额')">
						<p>
							可用余额
						</p>
					</view>
					<view class="price">
							
					</view>
					<view class="button"  @click="tixian_touchend">
						提&nbsp;&nbsp;&nbsp;&nbsp;现
					</view>
				</view> -->
				
				<view class="item">
					<view class="txt" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=cangdan&r=api.index.get_za_mingxi_list&title=仓单明细&hander=我的仓单')">
						<p>
							仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单
						</p>
					</view>
					<view class="price">
						{{qianbao_data.cangdan}}
					</view>
					<view class="button"  @click="fenhong_touchend">
						仓单转分红券
					</view>
				</view>
				
				
				<view class="item">
					<view class="txt" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=static_chicang&r=api.index.get_za_mingxi_list&title=分红券明细&hander=我的分红券')">
						<p>
							分&nbsp;&nbsp;红&nbsp;&nbsp;券
						</p>
					</view>
					<view class="price">
						{{qianbao_data.static_chicang}}
					</view>
					<view class="button">
						
					</view>
				</view>
				
				<view class="item">
					<view class="txt" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=cangliang&r=api.index.get_za_mingxi_list&title=仓量明细&hander=我的仓量')">
						<p>
							仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量
						</p>
					</view>
					<view class="price">
						{{qianbao_data.cangliang}}
					</view>
					<view class="button">
						
					</view>
				</view>
				
				
				<view class="item">
					<view class="txt"  @click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_chenxiang&r=api.index.get_za_mingxi_list&title=资产通明细&hander=我的资产通')">
						<p>
							资&nbsp;&nbsp;产&nbsp;&nbsp;通
						</p>
					</view>
					<view class="price">
						{{qianbao_data.za_chenxiang}}
					</view>
					<view class="button">
						
					</view>
				</view>
				
				<view class="item">
					<view class="txt" @click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_daijihuo&r=api.index.get_za_mingxi_list&title=待激活积分明细&hander=我的待激活积分')">
						<p>
							待激活积分
						</p>
					</view>
					<view class="price">
							{{qianbao_data.za_daijihuo}}
					</view>
					<view class="button">
						
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nonBreakingSpace: '\u00A0\u00A0\u00A0',
				openid: '',
				qianbao_data: {},
				tixian_x: 0,
				tixian_y: 0,
				fenhong_x: 0,
				fenhong_y: 0,
				shu_x: 0,
				shu_y: 0,
				n: true,
				txi:0
			};
		},
		onShow: function(e) {
			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					_this.openid= id
					_this.get_data()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			this.tixian_x = 0
			this.tixian_y = 0
			this.fenhong_x = 0
			this.fenhong_y = 0
			this.shu_x = 0
			this.shu_y = 0
			this.n=false
			setTimeout(()=>{
			
				this.n=true
			},100)
			
		},
		methods: {
			to_nextpage(path) {

				uni.navigateTo({
					url: path
				});
			},
		

			tixian_touchend(e,title) {

					uni.navigateTo({
						url: '/pagesZA/qianbao/txc?type='+e+'&title='+title,
						
					});

	
			},
		
			fenhong_touchend() {
				
					uni.navigateTo({
						url: '/pagesZA/qianbao/zhuanfenhong'
					});

			},
			
			shu_touchend() {
				
					uni.navigateTo({
						url: '/pagesZA/qianbao/rengzhong'
					});
				
			},
			jifen_touchend(){
				uni.navigateTo({
					url: '/pagesZA/qianbao/jifen'
				});
			},
			get_data() {
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						if (code == 1) {
							uni.navigateTo({
								url: '/pagesZA/home/home'
							});
						} else {
							this.qianbao_data = data
						}
						console.log(data);
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_openid(id) {
				this.openid = id
			},
		},
		watch:{
			// tixian_x(nv,ov){
			// 	console.log(nv,ov);
			// 	if(nv<70){
			// 		this.tixian_x=0
			// 	}
			// }
		}
	}
</script>

<style lang="less" scoped>
	page {
		height: calc(100vh - 100rpx);
		;
	}


	.container {
		height: 140vh;
		background: #7359FC;
		// background-size: cover;
	}
	.now_price{
		background: url('/static/zn/qianbao_now_price_bg.png') 0 0 no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: 18px;
		padding-left: 10px;
		width: 45vw;
		height: 35px;
	}
	.chongzhi{
		background: url('/static/zn/chongzhibg.png') 0 0 no-repeat;
		background-size: 100% 100%;
	
		width: 30vw;
		height: 35px;
	}
	.tixian_box{
		display: flex;
		justify-content: center;
		.ye{
			width: 50%;
			text-align: center;
			.txt{
				color: #fff;
				font-size: 18px;
			}
			.num{
				width: 100%;
				display: flex;
				justify-content: center;
				background: linear-gradient(to bottom, #FBEDB9, #FFB85C, );
				align-items: center;
				background-clip: text;
				color: transparent;
				font-weight: 800;
				overflow: hidden;
				
			}
			.button{
				margin: 0 auto;
				background: url('/static/zn/yue_tx.png')0 0 no-repeat;
				width: 90%;
				height: 35px;
				background-size: 100% 100% ;
			}
		}
		.sy{
			width: 50%;
			text-align: center;
			.txt{
				color: #fff;
				font-size: 18px;
			}
			.num{
				width: 100%;
				display: flex;
				justify-content: center;
				background: linear-gradient(to bottom, #FBEDB9, #FFB85C, );
				align-items: center;
				background-clip: text;
				color: transparent;
				font-weight: 800;
				overflow: hidden;
			}
			.button{
				margin: 0 auto;
				background: url('/static/zn/shoyi_tx.png')0 0 no-repeat;
				width: 90%;
				height: 35px;
				background-size: 100% 100% ;
			}
		}
	}
	.content_box{
		width: 100%;
		padding: 25px 25px;
		.top_three_box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.item_box{
				width: 33.33%;
				text-align: center;
				color: #fff;
				view{
					width: 100%;
				}
				.num{
					font-weight: 800;
				}
			}
			.item_box:nth-child(2){
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
			}
		}
		.top_therr_img{
			margin-top: 25rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.item_box{
				width: 30%;
				text-align: center;
				color: #fff;
				height: 230rpx;
				background-size: 100% 100% !important;
				display: flex;
				    flex-direction: column;
				    justify-content: flex-end;
			
				
				.num{
					width: 100%;
					
					height: 50rpx;
					font-weight: 600;
				}
			}
			
		}
		.from_box{
			width: 100%;
			background-color: #fff;
			padding: 20rpx 25rpx;
			margin-top: 25rpx;
			border-radius: 10px;
			.item{
				width: 100%;
				display: flex;
				height: 70rpx;
				border-bottom: 1px solid #A58DF2;
				align-items: center;
			}
			.txt{
				width: 30%;
				p{
					width: 100%;
					text-align: justify !important; /* 让文本充满视图宽度 */
				}
				
				
			}
			.price{
				width: 40%;
			}
			.button{
				text-align: center;
				width: 30%;
				background-color: #6A41EA;
				color: #fff;
				border-radius: 50px;
				font-size: 13px;
			}
		}
	}
</style>